<template>
  <el-dialog :title="enableEdit?'设置物流':'查看物流'"
             :close-on-click-modal="false"
             :visible.sync="visible"
             @close="close">
    <el-form ref="dataForm" :model="dataForm" label-width="110px" :rules="rules">
      <el-form-item label="物流公司：" prop="deliveryId">
        <el-select v-model="dataForm.deliveryId" style="width: 50%" :disabled="!enableEdit">
          <el-option v-for="(item, index) in expressList" :label="item.dvyName" :value="item.id" :key="index"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="物流编号：" prop="sn" v-if="enableEdit">
        <el-input v-model="dataForm.sn" style="width: 50%" :disabled="!enableEdit"  placeholder="请输入物流单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="物流单号：" prop="expressInfo" v-if="!enableEdit">
        <el-input v-model="dataForm.expressInfo" style="width: 50%" :disabled="!enableEdit"  placeholder="请输入物流单号" clearable></el-input>
      </el-form-item>
      <el-form-item v-if="enableEdit">
        <div>
          <el-button type="primary" @click.stop="save">确定</el-button>
          <el-button @click.stop="close">取消</el-button>
        </div>
      </el-form-item>
    </el-form>
    <el-timeline v-if="!enableEdit">
      <el-timeline-item v-for="(flow, index) in flowList" :key="index" :timestamp="flow.ftime">{{flow.context}}</el-timeline-item>
    </el-timeline>
    <div v-if="!enableEdit" style="display: flex;justify-content: center">
      <el-button type="primary" @click.stop="close">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    name: 'checkExpress',
    data () {
      return {
        visible: false,
        expressList: [],
        loading: false,
        enableEdit: true,
        dataForm: {
          deliveryId: '',
          sn: '',
          expressInfo: '',
          id: ''
        },
        flowList: [],
        rules: {
          deliveryId: [
            {required: true, message: '请选择物流公司', trigger: 'blur'}
          ],
          sn: [
            {required: true, message: '请输入物流单号', trigger: 'blur'}
          ],
          expressInfo: [
            {required: true, message: '请输入物流单号', trigger: 'blur'}
          ]
        }
      }
    },
    mounted () {

    },
    methods: {
      init (row, type) {
        console.log(row)
        this.visible = true
        this.enableEdit = type == 1 ? true : false
        this.dataForm.id = row.id
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          this.getDeliverList()
          if(type == 2) {
            this.getDeliverDetail(row.deliveryId, row.expressInfo)
          }
        })
      },

      getDeliverList () {
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/delivery/list'),
          method: 'get',
          params: this.$http.adornParams({})
        }).then(({ data }) => {
          this.expressList = data.data
        })
      },

      close () {
        this.visible = false
      },

      // 设置物流
      save () {
        this.$refs['dataForm'].validate((valid) => {
          this.loading = true
          this.$http({
            url: this.$http.adornUrl('/v1/apply/charging/set/delivery'),
            method: 'post',
            data: this.$http.adornData(this.dataForm)
          }).then(({data}) => {
            this.loading = false
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.visible = false
                this.$emit('refreshDataList')
              }
            })
          })
        })
      },

      getDeliverDetail (deliveryId, expressInfo) {
        this.$http({
          url: this.$http.adornUrl('/v1/merchant/delivery/get'),
          method: 'get',
          params: this.$http.adornParams(
            {
              deliveryId: deliveryId,
              expressInfo: expressInfo
            }
          )
        }).then(({ data }) => {
          this.dataForm = {
            deliveryId: data.data.companyName,
            expressInfo: data.data.dvyFlowId
          }
          this.flowList = data.data.data
          console.log(data)
        })
      }
    }
  }
</script>

<style scoped>

</style>
